<template>
  <view class="material">
    <view class="item">
      <view class="item-top">
        <text class="item-label">下载链接</text>
        <a-btn
          type="primary"
          size="small"
          @tap="setClipboardData(black_Get(materialList[0],'url'),'链接已复制')"
        >复制</a-btn>
      </view>
      <view class="item-cont">
        <text class="item-value">{{ black_Get(materialList[0],'url') }}</text>
      </view>
    </view>
    <view class="item">
      <view class="item-top">
        <text class="item-label">提取码</text>
        <a-btn
          type="primary"
          size="small"
          @tap="setClipboardData(black_Get(materialList[0],'psw'),'提取码已复制')"
        >复制</a-btn>
      </view>
      <view class="item-cont">
        <text class="item-value">{{ black_Get(materialList[0],'psw') }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  model
} from '@/model';

const {
  AxqMaterial
} = model.collection;

export default {
  data () {
    return {
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      materialList: [],
    }
  },
  onLoad () {
    this.getMaterialList()
  },
  onReachBottom () {
    if (this.total > (this.params.pageIndex * this.params.pageSize)) {
      this.params.pageIndex++;
      this.getMaterialList()
    }
  },
  methods: {
    getMaterialList () {
      AxqMaterial.sendApi('materialPage', {
        params: this.params,
        data: {}
      }).then(res => {
        const {
          status,
          data,
          page
        } = res;
        if (status) {
          this.total = page.total;
          this.materialList = this.materialList.concat(data);
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.material {
  min-height: 100%;
  padding: 20rpx 30rpx;
  background: #fff;

  .item {
    margin-bottom: 33rpx;

    &-top {
      .flexLayout(@j: space-between, @a: center);
    }

    &-label {
      padding: 31rpx 0;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      line-height: 48rpx;
    }

    /deep/ .axq-btn {
      border-radius: 20rpx;
    }

    &-cont {
      padding: @box-gap;
      background: #f5f5f5;
      border-radius: 20rpx;
    }

    &-value {
      word-break: break-all;
      height: 74rpx;
      font-size: 30rpx;
      color: #1376f0;
      line-height: 48rpx;
    }
  }
}
</style>